<template> 
  <div style="position: relative;" id="physdiv">
    <table class="table" width="100%"  style="text-align: center;border: 1px solid #000;" cellpadding="0" cellspacing="0">
        <tr>
            <td style="border-bottom: 1px solid #000;border-right: 1px solid #000;height: 80px;">
                <table width="100%" height="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td rowspan="2" style="border-right: 1px dashed #000;">项目</td>
                        <td style="border-bottom: 1px dashed #000;">年级</td>
                    </tr>
                    <tr>
                        <td>检查时间</td>
                    </tr>
                </table>
            </td>
            <td v-for="(rowlistitem,rowlistindex) in rowlist" :key="rowlistindex" :style="{width:`70%/${rowlist.length}`,borderRight:rowlistindex+1!=rowlist.length ? '1px solid #000' : ''}" style="border-bottom: 1px solid #000;height: 30px;">
                <div style="border-bottom: 1px solid #000;height: 50%;width: 100%;display: flex;align-items: center;justify-content: center;">{{rowlistitem.grade_name}}</div>
                <div style="height: 50%;width: 100%;display: flex;align-items: center;justify-content: center;"> {{rowlistitem.physical_date}}</div>
            </td>
        </tr>  
        <tr v-for="(childsitem,childsindex) in childs" :key="childsindex">
            <td :rowspan="childs.length" v-if="childsindex == 0" width="30%" style="border-right: 1px solid #000;height: 30px;">
                <table v-for="(item,index) in datas" :key="index" width="100%" cellpadding="0" cellspacing="0">
                    <tr v-for="(el,ind) in item.children" :key="ind">
                        <td :rowspan="item.children.length" v-if="ind == 0" width="30%" :style="{borderBottom:ind+1!=item.children.length ? '1px solid #000' : ''}"  style="border-right: 1px solid #000;height: 30px;">
                            {{item.title}}
                        </td>
                        <td v-if="el.children.length!=0" width="70%">
                            <table v-for="(item1,index1) in el.children" :key="index1" v-if="index1 == 0" width="100%" cellpadding="0" cellspacing="0">
                                <tr v-for="(el1,ind1) in el.children" :key="ind1">
                                    <td :rowspan="el.children.length" v-if="ind1 == 0" width="30%" :style="{borderBottom:ind+1!=item.children.length ? '1px solid #000' : ''}" style="border-right: 1px solid #000;height: 30px;">{{el.title}}</td>

                                    <td v-if="el1.children.length!=0" width="70%" style="height: 30px;">
                                        <table v-for="(item2,index2) in el1.children" :key="index2" v-if="index2 == 0" width="100%" cellpadding="0" cellspacing="0">
                                            <tr v-for="(el2,ind2) in el1.children" :key="ind2">
                                                <td :rowspan="el1.children.length" v-if="ind2 == 0" width="30%" style="border-right: 1px solid #000;border-bottom: 1px solid #000;height: 30px;">{{el1.title}}</td>
                                                <td  width="70%" style="border-bottom: 1px solid #000;height: 30px;">{{el2.title+(el2.unit ? '('+el2.unit+')' : '')}}</td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td v-else width="70%" style="height: 30px;border-bottom: 1px solid #000;">{{el1.title+(el1.unit ? '('+el1.unit+')' : '')}}</td>
                                </tr>
                            </table>
                        </td>
                        <td v-else width="70%" style="border-bottom: 1px solid #000;height: 30px;">{{el.title+ (el.unit ? '('+el.unit+')' : '')}}</td>
                    </tr>
                </table>
            </td>
            <td v-for="(rowlistitem,rowlistindex) in rowlist" :key="rowlistindex" :style="{width:`70%/${rowlist.length}`,borderRight:rowlistindex+1!=rowlist.length ? '1px solid #000' : '',borderBottom:childsindex+1!=childs.length ? '1px solid #000' : ''}" style="height: 30px;" >
                <span v-for="(rowlistscoreitem,rowlistscoreindex) in rowlistitem.score" :key="rowlistscoreindex">
                    <span v-if="childsitem.id == rowlistscoreitem.indicator_item_id">
                        {{rowlistscoreitem.score}}
                    </span>
                </span>
            </td>
        </tr>

    </table>
    <Spin size="large" fix v-if="spinShow"></Spin>
    
</div>
</template>
<script>
  export default {
    props: {
        userId: {
            type: [String,Number,Boolean],
            default: false
        },
        sex: {
            type: [Object,Boolean],
            default: false
        },
        
    },
    data() {
        return { 
            childs:[],
            datas:[],
            infoUrl:`api/medicalhealth/v1/physical/user_record?user_id=${this.userId}`,//请求单条数据
            infoOld:null,
            tabledata: [],
            spinShow:false,
            rowlist:[]
        }
    },
    methods: {

        

        /************************************************************
         * 
         * 处理数据，层级关系
         * 
         ************************************************************/
        process(data, arrold) {
            data.forEach(el => {
                let arr2 = []
                arr2 = arrold.filter(item => item.pid === el.id)
                el.children = arr2
                if (arr2.length) {this.process(arr2, arrold)}else{
                    this.childs.push(el)
                }
            })
        },

        /************************************************************
         * 
         * 处理数据，树状
         * 
         ************************************************************/
        dataTreating(data) {
            let trees = [];
            data.forEach(el => {
                trees.push({
                    id: el.id,
                    name: el.title,
                    expand: el.child && el.child.length > 0 ? true : false,
                    // expand:false,
                    children:
                        el.child && el.child.length > 0
                            ? this.dataTreating(el.child)
                            : []
                });
            });
            return trees;
        },

        
        /************************************************************
         * 
         * 通过年级性别加载指标项
         * 
         ************************************************************/
        indicatorsInfo(grade_id,sex,oldarr) {
            this.spinShow=true
            let condition = {
                id: grade_id,
                sex:sex
            }
            this.$http.get('api/medicalhealth/v1/indicatoritem/grade_indicator',{params:condition})
            .then(response=>{   
                this.rowlist = oldarr.map((item,index)=>{
                    let aa = item.records.map((ite)=>{
                            let bb = {
                                indicator_item_id:ite.indicator_item_id,
                                score:ite.score
                            }
                        return bb
                    })
                    let obj = {
                        grade_name:item.grade.grade_name?item.grade.grade_name.zh:'',
                        physical_date:item.physical_date,
                        score:aa,
                    }
                    return obj
                })
                let arrold =  response.data.map((el)=>{
                    let  aa = {
                        title:el.indicator_item_name,
                        unit:el.unit,
                        id:el.indicator_item_id,
                        sex:el.sex,
                        pid:el.pid,
                        children:[]
                    }
                    return aa
                })
                let tree  = arrold.filter(item => item.pid===0)
                this.process(tree,arrold)
                this.datas = tree
                this.tabledata = tree
                this.spinShow=false        
            })
            .catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow = false;
            })
            
        },
        computeLeafCount(node) {
            if(node.children.length===0){
                node.rowspan = 1;
                return 1;
            } else {
                let leafCount = 0;
                for(let i = 0 ; i < node.children.length ; i++) {
                    leafCount = leafCount + this.computeLeafCount(node.children[i]);
                }
                node.rowspan = leafCount;
                return leafCount;
            }
        },
        /************************************************************
         * 
         * 单条数据请求
         * 
         ************************************************************/
        infoData(){
            this.spinShow=true 
            this.$http.get(this.infoUrl).then(val=>{
                if(val.data.length>0){
                    let arr =  JSON.parse(JSON.stringify(val.data))
                    this.infoOld = arr[0]
                    let sex=null
                    if(this.sex.dictionary_id==13){sex=1}
                    if(this.sex.dictionary_id==14){sex=2}
                    this.indicatorsInfo(this.infoOld.grade_id,sex,arr)
                }
                              
            }).catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false 
            })
            
        },
    },
    created() { 
        this.infoData();

    },
  }
</script>
